<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", 0);
%>
<c:set var="smvc" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-CN">
<head>

	<%--bootstrap文档头规范start--%>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<%--bootstrap文档头规范end--%>

	<!--网页去除缓存方法start-->
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<!--网页去除缓存方法start-->

	<%--引入必要的bootstrap的js文件--start--%>
	<link href="${smvc}/css/bootstrap/bootstrap.min.css" rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="${smvc}/css/bootstrap/bootstrap-theme.css" rel="stylesheet">
	<link href="${smvc}/css/bootstrap/bootstrap-theme.min.css" rel="stylesheet">
	<script src="${smvc}/js/jquery-3.1.1.js"></script>
	<script src="${smvc}/js/bootstrap/bootstrap.min.js"></script>

	<%--引入必要的bootstrap的js文件--end--%>
	<%--其他文件--%>
	<script src="${smvc}/js/block/codeBlick.js"></script>
	<title>创建代码块</title>
	<style type="text/css">
		.textDiv {
			border: solid 1px #0066cc;
			padding: 2px;
			margin: 1px;
			font-size: 12px;
			display: inline;
		}

		.textDivSelected {
			border: solid 1px #0066cc;
			padding: 2px;
			margin: 1px;
			font-size: 12px;
			display: inline;
			background-color: #e5f7ff
		}

		.bigDiv {
			border: solid 1px #339933;
			padding: 2px;
			margin: 1px;
			font-size: 12px;
			display: inline;
		}

		#tishi {
			color: #FF0000;
		}

		#banKuaiInfo {
			display: none;
		}
		/*#codeBlock{*/
			/*border: 1px solid #00aaFF;*/
		/*}*/
	</style>
</head>
<body>

<%--头部--%>
<div class="page-header text-center">
	<h3 class="text-info">代码块列表</h3>
</div>

<%--页面主体--%>
<div style="width: 80%; margin: auto;">
	<%--代码块信息区start--%>
	<form id="codeBlock" class="form-inline" role="form" action="${smvc}/codeBlock/doEdit" method="post">

		<input type="hidden" id="blockID" name="id" value="${codeBlock.id}">

			<label class="" for="blockName">代码块名称</label>
			<input id="blockName" class="form-control" type="text" name="blockName"  value="${codeBlock.blockName}">
			<label class="" for="remark">备注</label>
			<input id="remark"  class="form-control"  name="remark" type="text" value="${codeBlock.remark}">

	</form>

	<%--代码块信息区end--%>
		<hr color="#FF0000">
	<%--版块信息区start--%>
	<form id="blockDetail" role="form">
		<%--复制代码块信息start--%>
		<input type="hidden"  name="id">

		<input type="hidden" name="blockName">

		<input name="remark" type="hidden">
			<%--复制代码块信息end--%>

		<div class="form-group" id="areaDiv">
			<label for="textArea">初始字符文本框</label>
			<textarea name="sourceCode" class="form-control" id="textArea" rows="15" placeholder="请在此输入文本"></textarea>
		</div>

			<%--全部的明细排列结构--%>
			<textarea name="detailSort" id="detailSort"></textarea>
		<%--板块信息--%>
		<table class="table" id="banKuaiInfo">
			<tbody>
				<tr>
					<th>版块名称</th>
					<th>版块类型</th>
					<th>版块规则</th>
					<th>版块值</th>
				</tr>


			</tbody>

		</table>

		<%--辅助提示信息--%>

			<p id="tishi">请选择开始内容</p>

		<p>
			<button type="button" id="switchBtn" class="btn btn-info">文本框/版块信息</button>
			<button type="button" id="piecesBtn" class="btn btn-danger">碎片化内容</button>
			<button type="button" id="modulEquallyBtn" class="btn btn-primary">板块化相同</button>
			<button type="button" id="piecesSelBtn" class="btn btn-success">碎片化版块</button>

			<label class="text-success" for="one"> 仅选中 </label>
			<input type="radio" name="suiPian" value="one" checked="checked" id="one">
			<label class="text-success" for="byName"> 全部相同 </label>
			<input type="radio" name="suiPian" value="byName" id="byName">

			<button type="button" id="modulSurplusBtn" class="btn btn-warning">板块化剩余</button>
			<button type="button" id="saveButton" class="btn btn-info">保存</button>

		</p>

		<!--经过分割的串放在这里-->
		<div id="divStr"></div>

	</form>
	<%--版块信息区end--%>

</div>

</body>
</html>
<script>

	function copyDomChildenVal(domAid,domBid){
		var inputs = $("#"+domAid).find("input");
		var areas = $("#"+domBid).find("textarea");
		for(var i = 0; i < inputs.length; i ++){
			$("#"+domBid).find("input[name='"+$(inputs[i]).prop("name")+"']").val($(inputs[i]).val())
		}
		for(var i = 0; i < areas.length; i ++){
			$("#"+domBid).find("input[name='"+$(areas[i]).prop("name")+"']").val($(areas[i]).val())
		}
	}
	/**
	 * 取得分割后字符串的结构顺序
	 * */
	function getDetailSort(){
		var detailDoms = $("#divStr").children();
		var sortStr = "";
		for(var i = 0; i < detailDoms.length; i++){
			sortStr += $(detailDoms[i]).attr("name") + ",";
		}

		$("#detailSort").val(sortStr)
	}

	/**
	 * 保存
	 */
	function save(){
		//首先将代码块内容拷贝到代码条的form中
		copyDomChildenVal("codeBlock", "blockDetail");
		getDetailSort();
		var blockDetailFor = $("#blockDetail").serialize();



		$.ajax({
			url : "${smvc}/codeBlock/doEdit",
			method : "POST",
			data : blockDetailFor,
			dataType : "json",
			success : function(result){
				if(0 == result.code){

				}else{
					alert(result.msg);
				}
			},
			error : function(err){
				console.log(err)
			}
		})

	}
</script>
